<template>
  <div class="header">
    <h1>代办<span class="en">事项</span></h1>
  </div>
  <div class="list">
    <div class="list_add">
      <input type="checkbox" class="checkallbox" @click="">
      <input type="text" placeholder="今天我们要做什么呢？" class="add_text" @keyup.enter="addlist" v-model="newtitle">
    </div>
    <ul>
      <li class="todolist" v-for="item in filterTodos" :key="item.id">
        <input type="checkbox" class="checkbox" :checked="item.isfinsh" @click="item.isfinsh = !item.isfinsh">
        <div :class="item.isfinsh ? 'list_textdel' : 'list_text'"><span>{{ item.text }}</span></div>
        <button class="list_del" @click="dellist(item.id)">✖</button>
      </li>
    </ul>
    <div class="control">
      <button @click="state = undefined">全部</button>
      <button @click="state = false">未完成</button>
      <button @click="state = true">已完成</button>
      <span class="surplus">今日剩余{{ count }}个事项</span>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { type Todo } from '@/types/todos'
import { saveTodos, readTodos } from '@/Utils/SaveLocaltodos';
// 声明响应式状态（数据）
const listData: Todo[] = reactive([])

// 用来绑定列表状态
let state = ref<undefined | boolean>(undefined);

// 声明计算属性
let filterTodos = computed(() => {
  return listData.filter(ele => { return ele.isfinsh == state.value || state.value == undefined });
});

// 用来计数
let count: number=readTodos().length


const newtitle = ref("")

// 声明删除方法，用来删除数一条数据
function dellist(id?: number) {
  // 1. 根据id获取todo项所在listData数组的索引值
  for (let i = 0; i < listData.length; i++) {
    const todo = listData[i];
    if (todo.id == id) {
      // 2. 通过索引值，调用数组的splice方法，删除此listData项
      if (window.confirm("你确定要删除吗？")) {
        listData.splice(i, 1)
        // 删除数量跟着减少
        count--
      }
      return;
    }
  }
}
// 声明添加方法，用来添加数据
function addlist() {
  let texts = newtitle.value
  if (!texts.length) {
    return
  }
  const todos = {
    id: Date.now(),
    text: texts,
    isfinsh: false
  }
  listData.push(
    ...[
      todos
    ]
  )
  count++
  // 清空文本框
  newtitle.value = ""
}
// 页面存储和读取操作
onMounted(() => {
  setTimeout(() => {
    listData.push(...readTodos())
    console.log(readTodos().length)
    console.log(readTodos())
  }, 1000);

})
// 监听存储的数据
watch(() => listData, saveTodos, { deep: true })
</script>

<style scoped>

/* 头部样式 */
.header {
  text-align: center;
  font-size: 35px;
  color: black;
}

.header .en {
  color: red;
}

/* 今日事项 */
.list {
  width: 500px;
  height: auto;
  margin: 0 auto;
  box-shadow: 2px 5px 10px 5px rgba(0, 0, 0, 0.2);
}

.list_add {
  display: flex;
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

/* 全选或全不选事项 */
.checkallbox {
  width: 30px;
  height: 30px;
  display: inline;
  margin: 31px 6px 31px 24px;
  float: left;
}

/* 添加事项 */
.add_text {
  display: inline;
  float: left;
  width: 424px;
  height: 60px;
  padding: 15px 16px 15px 5px;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #fefefe;
}

/* 事项样式 */
.list .todolist {
  padding: 20px;
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  display: flex;
  border: none;

}

/* 事项选择器 */
.checkbox {
  width: 30px;
  height: 30px;
}

/* 事项内容 */
.list_text {
  font-size: 30px;
  flex: 1;
  padding-left: 10px;
  display: inline-block;
}

/* 事项删除样式 */
.list_textdel {
  text-decoration: line-through;
  font-size: 30px;
  flex: 1;
  padding-left: 10px;
  display: inline-block;
  color: #d9d9d9;
  transition: all .3s;
}

/* 事项删除 */
.list_del {
  border: none;
  opacity: 1;
  background-color: #fefefe;
  font-size: 30px;
  color: red;
  cursor: pointer;
}

/* 选择对象控制 */
.control {
  width: 100%;
  height: 40px;
}

/* 按钮样式 */
.control button {
  height: 40px;
  margin-right: 3px;
  font-size: 18px;
  border: none;
  background-color: #fefefe;
}

/* 按钮悬停 */
.control button:hover {
  background-color: yellow;
  transition: all .5s;
  cursor: pointer;
}

/* 剩余事项 */
.surplus {
  float: right;
  line-height: 40px;
  margin-right: 10px;
}</style>

